<template>
  <el-main>
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-input v-model="searchModel.name" placeholder="请输入供应商名称"/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchModel.phone" placeholder="请输入联系方式"/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchModel.contact" placeholder="请输入联系人"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="hasPermission('sys:sup:add')">新增</el-button>
                </el-form-item>
    </el-form>
    <el-table :data="supList"  stripe style="width: 100%; margin-bottom: 10px">
                <el-table-column prop="id" label="编号" align="center" width="150px"></el-table-column>
                <el-table-column prop="name" label="供应商名称" align="center" width="260px"></el-table-column>
                <el-table-column prop="address" label="供应商地址" align="center" width="150px"></el-table-column>
                <el-table-column prop="contact" label="联系人" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
                <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
                <el-table-column  label="操作" align="center" width="300px">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="text" size="small" @click="handleEdit(scope.row)" v-if="hasPermission('sys:sup:edit')">编辑</el-button>
                        <el-button icon="el-icon-delete" type="text" size="small" @click="handleDelete(scope.row)" v-if="hasPermission('sys:sup:delete')">删除</el-button>
                    </template>
                </el-table-column>
    </el-table>
    <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" align="center">
    </el-pagination>
    <!-- 添加和修改窗口 -->
    <system-dialog
        :title="supDialog.title"
        :visible="supDialog.visible"
        :width="supDialog.width"
        :height="supDialog.height"
        @onClose="onClose"
        @onConfirm="onConfirm">
        <div slot="content">
        <el-form :inline="true" :model="sup" ref="supForm" :rules="rules" label-width="80px">
            <br>
        <el-form-item label="名称" prop="name">
            <el-input v-model="sup.name" style="width: 300px;"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="地址" prop="address">
            <el-input v-model="sup.address" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
            <el-input v-model="sup.contact" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="sup.phone" style="width: 300px;"></el-input>
        </el-form-item>
            <el-form-item label="备注" prop="remarks">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="sup.remarks"
                        style="width: 600px;">
                    </el-input>
            </el-form-item>
        </el-form>
        </div>
    </system-dialog>
  </el-main>
</template>
<script>
import{getSupList,AddSupList,updateSup,deleteSup} from '@/api/sup';
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
export default {
name:"supList",
    //注册组件
        components:{
            SystemDialog
        },
        data(){
            return{
                searchModel:{
                    name:'',
                    phone:'',
                    contact:'',
                    pageNo: 1,
                pageSize: 10,
                },
                supList:[],
                sup:{
                    id:'',
                    address:'',
                    contact:'',
                    name:'',
                    phone:'',
                    remarks:'',
                },
                pageNo: 1, //当前页码
                pageSize: 10, //每页显示数量
                total: 0, //总数量
                 //窗口属性
                supDialog: {
                    title: "",
                    visible: false, //是否显示
                    width: 750,
                    height: 350,
                },
                 rules:{
                name: [{ required: true, trigger: "blur", message: "请输入名称"}],
                address: [{ required: true, trigger: "blur", message: "请输入地址" }],
                contact: [{ required: true, trigger: "blur", message: "请输入联系人" }],
                phone:[{ required: true, trigger: "blur", message: "请输入联系方式" }],
            },
            }
        },
        methods:{
            //查询
            async search(pageNo=1,pageSize=10){
                this.searchModel.pageNo = pageNo;//当前页码
                this.searchModel.pageSize = pageSize;//每页显示数量
                let res = await getSupList(this.searchModel);
                //执行成功
                if (res.success) {
                //列表
                this.supList = res.data.records;
                //总数量
                this.total = res.data.total;
                }
            },
            //重置
            resetValue(){
                this.searchModel.name = '';
                this.searchModel.phone = '';
                this.searchModel.contact = '';
                this.search();
            },
            //新增
            openAddWindow(){
                //清空表单数据
                this.$resetForm("supForm", this.sup);
                //设置窗口标题
                this.supDialog.title = "添加供应商";
                //显示添加部门窗口
                this.supDialog.visible = true;
            },
            //删除
            async handleDelete(row){
                let confirm =await this.$myconfirm("确定要删除该数据吗?");
                if(confirm){
                    let res = await deleteSup({id:row.id})
                    if(res.success){
                        this.$message.success(res.message);
                        this.search();
                    }else{
                        this.$message.error(res.message);
                    }
            }
            },
            /**
            * 当每页数量发生变化时触发该事件
            */
            handleSizeChange(size) {
                this.pageSize = size; //将每页显示的数量交给成员变量
                this.search(this.pageNo, size);
            },
            /**
            * 当页码发生变化时触发该事件
            */
            handleCurrentChange(page) {
                this.pageNo = page;
                //调用查询方法
                this.search(page, this.pageSize);
            },
            // 关闭窗口
            onClose(){
                this.supDialog.visible = false;
            },
            handleEdit(row){
                //数据回显
                this.$objCopy(row, this.sup);
                //设置窗口标题
                this.supDialog.title = "编辑";
                //显示编辑部门窗口
                this.supDialog.visible = true;
            },
            onConfirm(){
            //验证表单
            this.$refs.supForm.validate(async (valid) => {
                let res = null;
                if (valid) {
                    //发送发布请求
                    if(this.sup.id===''){
                        //添加
                        res = await AddSupList(this.sup);
                    }else{
                        //修改
                        res = await updateSup(this.sup);
                    }
                    if(res.success){
                        this.$message.success(res.message);
                        this.search();
                        //关闭窗口  
                        this.supDialog.visible = false;
                    }else{
                        this.$message.error(res.message);
                    }
                    //关闭窗口
                    this.supDialog.visible = false;
                }
            });
        },
    },
    //初始化时调用
    created() {
        this.search()
    },
}
</script>

<style>

</style>